<template>
  <view class="wrapper row">
    <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;">
      <u-input v-model="value" class="flex-1 fon4-24 pd_l_30 pd_r_30" :height="50" placeholder="请输入院校名称进行搜索"/>
      <view class="btn color-active">搜索</view>
    </view>
    <view class="dropdown yh_bd_bottom">
      <u-dropdown active-color="#2A6AAA">
        <u-dropdown-item v-model="value1" title="全部省份" :options="options1"></u-dropdown-item>
        <u-dropdown-item v-model="value2" title="全部类型" :options="options2"></u-dropdown-item>
      </u-dropdown>
    </view>
    <view class="flex-1 row">
      <scroll-view scroll-y style="height: 100%">
        <view class="table">
          <view class="th bg-f2f2f2 row cont-center flex-around">
            <view class="td color-active font-24 pd_t_20 pd_b_20 flex-1">专业排名</view>
            <view class="td color-active font-24 pd_t_20 pd_b_20 flex-1">院校名称</view>
          </view>
          <block v-for="(item, index) in 250">
            <view class="th row cont-center flex-around" :class="{'bg-f2f2f2': index %2 != 0}">
              <view class="td flex-1 font-24 pd_t_20 pd_b_20 ">1</view>
              <navigator url="/pages/explore/school_info" class="td flex-1 font-24 pd_t_20 pd_b_20 color-active">北京大学</navigator>
            </view>
          </block>
        </view>
        <view class="color-999 text-cent font-20 pd_b_20">数据仅供参考，最终以高校与考试院公布为准！</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        value1: 1,
        value2: 2,
        options1: [
          {
            label: '默认排序',
            value: 1,
          },
          {
            label: '距离优先',
            value: 2,
          },
          {
            label: '价格优先',
            value: 3,
          }
        ],
        options2: [{
          label: '去冰',
          value: 1,
        },
          {
            label: '加冰',
            value: 2,
          },
        ],
      }
    }
  }
</script>

<style scoped lang="scss">
  .wrapper {
    flex-direction: column;
    height: 100%;
    .search {
      width: 100%;
      background: rgba(249, 249, 249, 100);
      padding-top: 20upx;
      padding-bottom: 20upx;

      .flex-1 {
        background: #fff;
        border-radius: 25upx;
        margin-right: 20upx;
      }
    }
    .flex-1 {
      width: 100%;
    }
    .table {
      width: 92%;
      margin: 0 auto;
      margin-top: 30upx;
      margin-bottom: 30upx;
      .td, .th {
        text-align: center;
      }
    }
  }
</style>
